<!--云闪推——开头/片尾库-->
<template>
  <div class="ele-body">
    <el-card
      shadow="never"
      header="开头视频"
      body-style="padding: 23px;"
    >
      <el-button
        size="small"
        type="primary"
        class="ele-btn-icon"
        icon="el-icon-upload2"
        @click="openFolderUpload(1)"
        :disabled="startList.length>=5"
      >
        上传
      </el-button>
      <!--:disabled="!checked.length"-->
      <el-button
        size="small"
        type="danger"
        icon="el-icon-delete"
        style="margin-left: 10px"
        class="ele-btn-icon hidden-xs-only"
        :disabled="!startCheckedCities.length"
        @click="removeBatch(1)"
      >
        删除
      </el-button>
        <div class="flex-align-center m-top20" v-if="startList.length>0">
          <div class="piece-cls flex relative" v-for="(i,j) in startList" :key="j"
               :class="startCheckedCities.length>0 && startCheckedCities.indexOf(i.id) >= 0 ? 'checkbox-piece-cls' : '' ">
            <el-checkbox-group class="width100" v-model="startCheckedCities" @change="handleCheckedCitiesChange">
              <el-checkbox  class="checkbox-cls" :label="i.id" :class="startCheckedCities.length>0 && startCheckedCities.indexOf(i.id) >= 0 ? 'checkbox-show' : '' ">{{i.name}}</el-checkbox>
              <video :src="i.fileUrl" style="height: 222px;width: 100%;object-fit: cover;" @click="videoPreview(i)"></video>
            </el-checkbox-group>
          </div>
        </div>
        <div class="flex m-top20" v-else>
          <img class="none-cls" src="@/assets/none.png" />
        </div>
    </el-card>

    <el-card
      shadow="never"
      header="片尾视频"
      body-style="padding: 23px;"
    >
      <el-button
        size="small"
        type="primary"
        class="ele-btn-icon"
        icon="el-icon-upload2"
        :disabled="endList.length>=5"
        @click="openFolderUpload(2)"
      >
        上传
      </el-button>
      <el-button
        size="small"
        type="danger"
        icon="el-icon-delete"
        style="margin-left: 10px"
        class="ele-btn-icon hidden-xs-only"
        :disabled="!endCheckedCities.length"
        @click="removeBatch(2)"
      >
        删除
      </el-button>


      <div class="flex-align-center m-top20" v-if="endList.length>0">
        <div class="piece-cls flex relative" v-for="(i,j) in endList" :key="j"
             :class="endCheckedCities.length>0 && endCheckedCities.indexOf(i.id) >= 0 ? 'checkbox-piece-cls' : '' ">
          <el-checkbox-group class="width100" v-model="endCheckedCities" @change="endHandleCheckedCitiesChange">
            <el-checkbox  class="checkbox-cls" :label="i.id"
                          :class="endCheckedCities.length>0 && endCheckedCities.indexOf(i.id) >= 0 ? 'checkbox-show' : '' ">{{i.name}}</el-checkbox>
            <!--object-fit: fill;——自动填充满父div-->
            <video :src="i.fileUrl" style="height: 222px;width: 100%;object-fit: cover;" @click="videoPreview(i)"></video>
          </el-checkbox-group>
        </div>
      </div>

      <!--
            <el-radio-group v-model="radio" class="width100 flex">
      <div v-if="endList.length>0">
        <div class="piece-cls relative" v-for="(i,j) in endList" :key="j">
          <el-radio size="medium" class="radio-cls" :label="j" @input="input">{{ '' }}</el-radio>
          <el-image :src="i.fileUrl"></el-image>
        </div>
      </div>
            </el-radio-group>
-->
      <div class="flex m-top20" v-else>
        <img class="none-cls" src="@/assets/none.png" />
      </div>
    </el-card>
    <!-- 上传文件弹窗 -->

    <file-upload
      ref="upload"
      :visible.sync="folderUpload"
      @done="onDone"
    />

    <!--查看视频-->
    <look-video
      :visible.sync="videoVisible"
      :videoUrl="videoUrl"
      ref="videoRef"
    >
    </look-video>
  </div>
</template>

<script>
  import FileUpload from "./components/file-upload";
  import {queryTrailer,delTrailer} from "@/api/lncomingManagement/openOrEndLibrary";
  import {queryFolder} from "@/api/lncomingManagement/fileList";
  import {getFileAll, publicFile} from "@/api/creatCenter/material";
  import LookVideo from "@/views/creatCenter/piecemeal/components/look-video";
  export default {
    name: "index",
    components: {LookVideo, FileUpload},
    data(){
      return{
        startCheckedCities: [],
        endCheckedCities: [],
        radio: 0,
        // 上传图片 弹框标识
        folderUpload:false,

        startList:[], //片头list
        endList:[], //片尾list


        videoVisible:false,// 预览视频
        videoUrl:''//预览的视频url
      }
    },
    // 路由刷新
    activated() {
      this.init()
    },
    methods:{
      //预览视频
      videoPreview(item){
        this.videoUrl=item.fileUrl
        this.videoVisible=true
        this.$nextTick(()=>{
          this.$refs['videoRef'].show()
        })
      },
      handleCheckedCitiesChange(value) {
        console.log("复选框选择========value",value)
      },
      endHandleCheckedCitiesChange(value) {
        console.log("结束复选框选择========value",value)
      },
      removeBatch(type){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("322222222222",this.startCheckedCities)
          // type 1:片头 2：片尾
          let ids=type==1 ? this.startCheckedCities : this.endCheckedCities
          delTrailer({
            ids:ids,
          })
            .then((data) => {
              this.onDone()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },
      // 查询片头/片尾list
      async init(){
        // 查询片头list
        this.startList= await queryTrailer({
          merchantId: this.$store.state.user.info.merchantId, // 商家id
          types:1//1:片头 2：片尾
        })
        // 查询片尾list
        this.endList= await queryTrailer({
          merchantId: this.$store.state.user.info.merchantId, // 商家id
          types:2//1:片头 2：片尾
        })
        console.log("this.startList",this.startList,"this.endList",this.endList)
      },
      input(e){
        console.log("进入输入框e======",e)
      },
      /* 打开上传文件弹窗 */
      openFolderUpload(type) {
        // type 1:片头 2：片尾
        let haveLength= type==1 ? this.startList.length : this.endList.length // 查询当前已有的片头/片尾数量
        if(haveLength==5){
          this.$message.error('你已上传最大5个视频')
          return
        }
        this.folderUpload = true;
        this.$refs['upload'].show(haveLength,type)
      },
      // 刷新
      onDone(){
        this.init()
        this.startCheckedCities=[] //清空复选框的值
        this.endCheckedCities=[] //清空复选框的值
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .checkbox-cls .el-checkbox__inner{
    border-radius: 50% !important;
    width: 20px;
    height: 20px;
  }
     /deep/ .checkbox-cls .el-checkbox__inner::after{
       height: 10px;
       left: 7px;
       top: 2px;
  }
  .checkbox-piece-cls{
    border: 1px solid #1890ff;
    background-color: #e6f7ff;
    border-radius: 10px;
  }
  /*展示*/
  .checkbox-show{
    display: block !important;
  }
  .piece-cls:hover{
    .checkbox-cls{
      display: block !important;
    }
    background-color: #e6f7ff;
    border-radius: 10px;
  }
  .piece-cls{
    padding: 12px;
    width: calc(100%/5);
    margin: 0 5px;
    /*width: 100%;*/
    .radio-cls{
      z-index: 999;
      position: absolute;
      top: 10px;
      max-height: 146px;
      right: -30px;
    }
    .checkbox-cls{
      display: none;
      z-index: 999;
      position: absolute;
      top: 10px;
      max-height: 146px;
      right: -1px;
    }
  }
  .none-cls{
    max-height: 222px;

  }
</style>
